<template>
	<!--我关注的优惠券-->
	<!--https://youzan.github.io/vant/#/zh-CN/intro-->
	<div class="coupon" id="app">
		<!--头部-->
		<myheader></myheader>
		<!--没有数据-->
		<div class="noinfo" v-if="showlogge">
			<img src="../../../../static/wfy/crying_face1.png" />
			<p class="showtop">您还没有优惠券</p>
		</div>
		<!--有数据-->
		<ul class="houseinfo" v-else-if="!showlogge">
			<li>
				<div class="couponbox">
					<p class="title"></p>
					<div class="housebox">
						<div class="couponcontent">
							<div class="">
								<h3 class="contenttitle">免租活动(会主计划)</h3>
								<h4 class="contenpic">15日免租金券</h4>
								<dl class="contenif">线下签约可用</dl>
							</div>
							<div class="contengo_btn">
								<router-link to='/percent/housing'>去使用</router-link>
							</div>
						</div>
						<div class="coupondata">
							<dl class="">12.11-12.1可用</dl>
							<span class="rulebtn" @click="showToggle">详细规则</span>
						</div>
					</div>
				</div>
				<div class="details" v-show="isShow">
					<p>1.优惠券限参与“惠租计划”专题活动且有对应优惠券标识的部分房源使用；集中式房源中，部分房型享受免租优惠，先到先得，租完为止</p>
					<p>2.30日免租：指定房源签订租期合同满12个月可使用）</p>
					<p>3.房租减免形式以下两种方式，具体形式需与商户签订租房协议时，做出协议约定：</p>
					<p>分摊减：实际减免天数折算成对应的房租金额，平均分摊至每月房租中，减少每月房租金额。</p>
					<p>首月减：实际减免天数折算成对应的房租金额，首月直接减免。</p>
					<p>4.如参与活动用户在租期内提前退租，需退回优惠金额给商户，具体退回方式参照用户与商家书面协议约定，如无约定需参与活动用户与商户协商</p>
					<p>5.平台只提供信息展示，具体合同条款及签约支付需用户与商户自行沟通完成</p>
					<p>6.查看优惠券：贝壳APP-我的-我的优惠券，本券不与其他优惠同享</p>
					<p>8.参与活动城市：北京、杭州、成都、武汉、上海、南京、重庆、郑州、西安、深圳、济南、广州、苏州、天津、长沙、合肥、青岛、石家庄、宁波、佛山、厦门、东莞</p>
					<p>9.贝壳找房客服电话：10106188 </p>
				</div>
			</li>
		</ul>

	</div>
</template>
<script>
	import myheader from '@/components/public/myheader'
	export default {
		name: 'coupon',
		data() {
			return {
				showlogge: false,
				isShow: false
			}
		},
		mounted:function() {
			//判读是否登陆了
			if(localStorage.getItem("nameid")==null||localStorage.getItem("nameid")==undefined||localStorage.getItem("nameid")==""){
				this.$router.push({
					name:'login'
				});
			}
			else{
				
			}
		},
		components: {
			myheader
		},
		methods: {
			showToggle: function() {
				this.isShow = !this.isShow
				if (this.isShow) {
					this.btnText = "隐藏"
				} else {
					this.btnText = "显示"
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.noinfo {
		margin-top: 3.1rem;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.showtop {
		width: 100%;
		text-align: center;
		margin-top: 0.3rem;
		color: #9699a0;
		font-size: 0.35rem;
	}
	
	.noinfo img {
		width: 2.65rem;
		height: 2.65rem;
	}
	
	.houseinfo {
		background: #f8f8f8;
		list-style: none;
	}
	
	.houseinfo li {
		padding: 0.45rem;

		box-sizing: border-box;
	}
	
	.houseinfo li .couponbox {
		width: 100%;
		height: 100%;
		display: block;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		color: #000000;
	}
	
	.title {
		width: 0.8rem;
		height: 2.7rem;
		background: url(../../../../static/wfy/coupon.png)no-repeat;
		background-size: cover;
	}
	
	.housebox {
		width: 5.8rem;
		padding: 0.3rem 0.2rem;
		height: 2.7rem;
		background: url(../../../../static/wfy/coupon01.png)no-repeat;
		background-size: cover;
		box-sizing: border-box;
	}
	
	.couponcontent {
		display: flex;
		justify-content: space-between;
	}
	
	.contenttitle {
		color: #000000;
		font-size: 0.28rem;
	}
	
	.contenpic {
		color: #e8563f;
		font-size: 0.35rem;
		height: 0.67rem;
		line-height: 0.67rem;
	}
	
	.contenif {
		height: 0.4rem;
		line-height: 0.4rem;
		font-size: 0.2rem;
		color: #d9dbda;
	}
	
	.contengo_btn>a {
		display: inline-block;
		width: 1.4rem;
		background: #fc6255;
		height: 0.6rem;
		border-radius: 15rem;
		line-height: 0.6rem;
		text-align: center;
		font-size: 0.3rem;
		color: #fff;
		margin-top: 0.7rem;
		margin-right: 0.2rem;
		box-sizing: border-box;
	}
	
	.coupondata {
		display: flex;
		justify-content: space-between;
		color: #93969d;
		font-size: 0.28rem;
		margin-top: 0.45rem;
	}
	
	.rulebtn {
		width: 1.44rem;
		background: url(../../../../static/wfy/selbtn.jpg) no-repeat right center;
		background-size: 0.28rem 0.16rem;
	}
	
	.details {
		padding: 0.25rem;
		box-sizing: border-box;
		font-size: 0.28rem;
		color: #93969d;
		background: #fff;
		line-height: 0.35rem;
	}
</style>